<template>
  <div class="cloud-wrapper">
    <canvas class="viewport" width="1920" height="1080"></canvas>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { FrontProcessing } from "@/FrontProcessing";
import { useCoreStore } from "@/UI/store";
const coreStore = useCoreStore();
onMounted(() => {
  const appDom = document.getElementById("viewport");
  const father = document.getElementsByClassName("editor-wrapper")[0];
  if (father) {
    (appDom as HTMLElement).style.width = father.clientWidth + "px";
    (appDom as HTMLElement).style.height = father.clientHeight + "px";
  }
  if (appDom) {
    const engine = new FrontProcessing(appDom, {
      cloudRender: true,
    });
    coreStore.setEngine(engine);
  }
});
</script>
<style scoped lang="less"></style>
